<template>
  <div class="ds-left">
    <div class="eq-left-top">
      <div class="eq-left-top-title">
        <img src="../../../assets/images/home-page/eq-right.png" alt="" />
        测量信息
      </div>
      <div class="eq-left-top-content">
        <div class="e-select-box">
          <div class="eq-left-top-c-seach">
            <input type="text" v-model="searchQuery" placeholder="搜索" />
          </div>
          <div class="e-select">
            <el-select v-model="selectedValue" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
        <div class="tab-content">
          <div class="tab-i-content">
            <div
              v-for="(item, index) in contentList"
              class="tab-i-c-box"
              :class="{ 'tab-i-c-box': true, active: index === activeIndex }"
              @click="setActiveItem(index, item)"
            >
              <span class="tab-type-g" v-if="item.measureType == 1">高度</span>
              <span class="tab-type-j" v-if="item.measureType == 2">长度</span>
              <span class="tab-type-m" v-if="item.measureType == 3">面积</span>
              <span class="tab-lab">{{ item.measureName }}</span>
              <span class="tab-value">{{ item.measureTime }}</span>
              <img @click="delelt(item)" src="../../../assets/images/home-page/delelt.png" alt="" />
            </div>
          </div>
        </div>
        <div class="r-t-i-box">
          <div class="eq-r-t-i-title">
            <span class="eq-dio"></span>
            <span class="eq-d-title">测量记录 I</span>
          </div>
          <div class="tab-i-btn" @click="canChange"> 导出 </div>
        </div>
        <div class="r-t-record">
          <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            @current-change="handleCurrentChange"
            style="width: 100%"
          >
            <el-table-column property="X" width="60px" label="X轴" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column property="Y" width="60px" label="Y轴" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column property="Z" width="60px" label="Z轴" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
              property="Length"
              width="90px"
              label="长度/高度"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column property="Area" width="60px" label="面积" align="center" :show-overflow-tooltip="true">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { gisAnalysislistPage, deleteById } from '@/api/auth/ledger.js';
  import { onMounted } from 'vue';
  import { getHistory, transmitHistory, deleteDistanceData } from '../../../utils/ue.js';
  import DeviceSearch from '@/views/home/components/DeviceSearch.vue';
  import { NstdMessage } from 'nstd-components-pc-v3';
  const treeList = ref([]);
  const emit = defineEmits();
  const defaultProps = {
    children: 'children',
    label: 'deviceName'
  };
  const tableData = ref([]);
  const params = ref({
    measureName: '',
    measureTime: '',
    measureType: '',
    orderByDesc: '',
    pageNum: 0,
    pageSize: 20,
    valueList: ''
  });
  const contentList = ref([]);
  const selectedValue = ref('');
  const options = ref([
    {
      value: 'option1',
      label: '选项1'
    },
    {
      value: 'option2',
      label: '选项2'
    },
    {
      value: 'option3',
      label: '选项3'
    }
    // 更多选项...
  ]);
  // 搜索框的值
  const searchQuery = ref('');
  const filteredData = computed(() => {
    return treeList.value.filter((item) => item.deviceName.toLowerCase().includes(searchQuery.value.toLowerCase()));
  });

  const activeIndex = ref(-1);

  function setActiveItem(index, item) {
    console.log('item', item);
    activeIndex.value = index;
    tableData.value = item.valueJSONArray;
    getHistory(item.id);
  }

  onMounted(async () => {
    const response = await fetchData();
    options.value = response.data;
    selectedValue.value = options.value.length > 0 ? options.value[0].value : '';
    getAnalysislistPage();
  });

  function delelt(item) {
    console.log('item', item);
    deleteById({ id: item.id }).then((res) => {
      console.log('res', res);
      NstdMessage.success('删除成功');
      deleteDistanceData(item.id);
      getAnalysislistPage();
    });
  }

  const getAnalysislistPage = () => {
    gisAnalysislistPage(params.value).then((res) => {
      console.log('res', res);
      contentList.value = res.data.data;
      transmitHistory(res);
    });
  };
  async function fetchData() {
    // 模拟 API 调用
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          data: [
            {
              value: 'option1',
              label: '全部'
            },
            {
              value: 'option2',
              label: '选项2'
            },
            {
              value: 'option3',
              label: '选项3'
            }
            // 更多选项...
          ]
        });
      }, 1000);
    });
  }
  defineExpose({
    getAnalysislistPage
  });
</script>

<style lang="scss" scoped>
  .ds-left {
    width: 360px;
    position: absolute;
    top: 120px;
    right: 18px;
    z-index: 999;
    .eq-left-top {
      width: 100%;
      .eq-left-top-title {
        width: 100%;
        height: 33px;
        background: rgba(10, 39, 82, 1);
        display: flex;
        align-items: center;
        color: #fff;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        img {
          width: 20px;
          height: 21px;
          margin: 0 5px 0 10px;
        }
      }
      .eq-left-top-content {
        padding: 10px 0;
        // height: 504px;
        background: rgba(5, 30, 67, 0.6);
        .e-select-box {
          width: 330px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .e-select {
            width: 90px;
            height: 32px;

            border-radius: 4px;
          }
          .eq-left-top-c-seach {
            width: 230px;
            height: 38px;
            background-image: url('../../../assets/images/home-page/seach-bg-min.png');
            background-size: 100% 100%;
            // margin: 0 auto;
            line-height: 38px;
            input {
              background: transparent;
              width: 60%;
              height: 25px;
              margin-left: 15px;
              color: #fff;
              outline: none;
              border: none;
            }
          }
        }

        .eq-left-top-c-tree {
          width: 90%;
          margin: 10px auto 0 auto;
        }
        .tab-content {
          width: 330px;
          height: 36vh;
          background-color: rgba(5, 30, 67, 0.65);
          margin: 6px auto 0 auto;
          border: 1px solid #1f4996;
          .tab-i-content {
            width: 100%;
            height: 80%;
            // overflow-y: scroll;
            // .tab-i-c-box:nth-child(2n) {
            //   background-color: rgba(33, 66, 124, 0.6);
            // }
            span {
              font-size: 12px;
              color: #fff;
            }
            .tab-type-g,
            .tab-type-j,
            .tab-type-m {
              width: 60px;
              height: 30px;
              border-radius: 15px;
              text-align: center;
              line-height: 30px;
            }
            .tab-type-g {
              background: #35c1ff;
            }
            .tab-type-j {
              background: #e2b432;
            }
            .tab-type-m {
              background: #a957f3;
            }
            img {
              width: 19px;
              height: 19px;
            }
            .tab-i-c-box {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-around;
              height: 36px;
              background: rgba(10, 138, 206, 0.2);
              border-radius: 1px;
              margin-bottom: 2px;
              &:hover {
                cursor: pointer;
                background-color: rgba(10, 138, 206, 0.6);
              }
              .tab-lab {
                font-family: PingFang SC;
                font-size: 16px;
                color: rgba(255, 255, 255, 0.8);
                margin-left: 5px;
                font-size: 12px;
              }
              .tab-value {
                font-family: PingFang SC;
                font-size: 16px;
                color: #ffffff;
                font-size: 12px;
              }
            }
            .active {
              background-color: rgba(10, 138, 206, 0.6);
            }
            // padding: 20px;
            // border: 1px solid #ccc;
            // display: none;
          }
        }
        .r-t-record {
          width: 330px;
          height: 30vh;
          background-color: rgba(5, 30, 67, 0.65);
          margin: 6px auto 0 auto;
          border: 1px solid #1f4996;
        }
        .r-t-i-box {
          width: 330px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 10px auto;
          .eq-r-t-i-title {
            display: flex;
            align-items: center;
            padding-top: 10px;
            .eq-dio {
              width: 8px;
              height: 8px;
              background: #19db3c;
              border-radius: 50%;
            }
            .eq-d-title {
              font-family: PingFang SC;
              font-weight: bold;
              font-size: 14px;
              color: #ffffff;
              text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
              margin-left: 5px;
            }
          }
          .tab-i-btn {
            width: 80px;
            height: 30px;
            background-image: url('../../../assets/images/home-page/tubiao-bg.png');
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFang SC;
            font-size: 12px;
            color: #ffffff;
            // margin: 10px auto 0 auto;
            cursor: pointer;
            &:hover {
              opacity: 0.95;
            }
          }
        }
      }
    }
  }
  :deep(.el-select__wrapper) {
    background: linear-gradient(0deg, #0b8ccf, #07268a) !important;
    outline: none !important;
    border: none !important;
  }
  :deep(.el-select__placeholder) {
    color: #fff !important;
  }
  :deep(.el-table) {
    width: 330px !important;
    background-color: transparent !important;
    color: #fff !important;
    opacity: 0.9;
    outline: none !important;
  }

  :deep(.el-table) tr {
    outline: none !important;
    border: none !important;
    /* background-color: transparent !important; */
    /* height: 30px !important; */
    background-color: rgba(10, 138, 206, 0.6) !important;
    cursor: pointer;
  }

  :deep(.el-table th.is-leaf) {
    border: none !important;
    outline: none !important;
  }

  :deep(.el-table--medium td) {
    padding: 5px 0 !important;
    margin-top: 5px !important;
  }

  :deep(.el-table td) {
    border: none !important;
    outline: none !important;
    background-color: transparent !important;
  }

  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
    /* background-image: url(../../../assets/img/preview/c_check.png) ; */
    background-color: rgba(10, 138, 206, 0.2) !important;
    outline: none !important;
  }

  :deep(.el-table .cell) {
    line-height: normal !important;
  }

  :deep(.el-table__body tr.current-row > td) {
    /* background-image: url(../../../assets/img/preview/c_check.png) !important; */
    background-color: rgba(36, 131, 99, 0.6) !important;
    outline: none !important;
  }

  :deep(.el-table .el-table__header-wrapper th) {
    /* background-color: transparent !important; */
    background-color: rgba(33, 66, 124, 0.8) !important;
    height: 40px !important;
    color: #fff !important;
    font-size: 12px !important;
  }

  :deep(.el-table__body-wrapper) {
    height: 210px;
    overflow-y: scroll !important;
  }

  :deep(.el-table__body-wrapper::-webkit-scrollbar) {
    width: 0px !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  /* 滚动条轨道部分 */
  :deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
    background-color: transparent !important;
    /* background-color: rgb(15, 43, 87) !important; */
  }

  /* 滚动条滑块部分 */
  :deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
    border-radius: 0px !important;
    /* background-image: linear-gradient(135deg, #193b82, #193b82); */
    background-color: transparent !important;
  }

  :deep(.el-table::before) {
    background-color: transparent !important;
  }
  :deep(.el-table--fit .el-table__inner-wrapper:before) {
    display: none !important;
  }
</style>
